<template>
    <div class="login-back"></div>
    <div class="login-container">
      <el-card class="login-card">
        <h2 class="login-title">Login</h2>
        <el-form class="login-form" ref="loginForm" :model="loginForm" :rules="rules" size="medium">
          <el-form-item prop="username" label="用户名">
            <el-input v-model="loginForm.username" clearable prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密 码">
            <el-input v-model="loginForm.password" clearable show-password prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item class="login-button">
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const loginForm = ref({
    username: '',
    password: ''
  })
  const handleLogin = () => {
    router.push('/index')
  }
  </script>
  
  <style scoped>
  .login-back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background-image: url('../assets/login-back.png'); 
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
  }
  .login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login-card {
    background-color: rgba(255, 255, 255, 0.585); /* 半透明白色背景 */
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    text-align: center;
    max-width: 400px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .login-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .login-form {
    margin: 0 auto;
    text-align: left;
  }
  
  .login-button {
    text-align: center;
  }
  </style>
  